<template>
  <view>
    <view class="goods-list">
      <block v-for="(product, index) in productList" :key="index">
        <view @click="gotoProductDetail(product)" class="goods-item">
          <!-- 商品左侧图片区域 -->
          <view class="goods-item-left">
            <image
              :src="product.goods_small_logo || defaultImage"
              class="goods-pic"
            ></image>
          </view>

          <!-- 商品右侧信息区域 -->
          <view class="goods-item-right">
            <!-- 商品标题 -->
            <view class="goods-name">{{ product.goods_name }}</view>
            <view class="goods-info-box">
              <!-- 商品价格 -->
              <view class="goods-price"
                >￥{{ $format(product.goods_price) }}</view
              >
            </view>
          </view>
        </view>
      </block>
    </view>
  </view>
</template>

<script>
/* 
  防抖/节流:   (区别/场景/实现)

  1. 防抖是保留最后一次 节流是保留第一次

  2. 防抖一般用于搜索业务 获取用户输入完成后的内容请求后端接口;
     节流一般用于触底 在触"底"后 需要打开节流阀(布尔值) 将来根据标记的状态 控制 高频操作的触发

  3. 防抖的实现在于清定时器开定时器
     节流的实现在于节流标记的控制 标识当下是否正在做某件事!!!
*/
export default {
  data() {
    return {
      loading: false, // 标记 是否正在请求

      params: {
        pagenum: 1,
        pagesize: 10,
        query: '',
        cid: '',
      },

      // 商品数据
      productList: [],

      // 商品数据总条数，用来实现分页
      total: 0,

      defaultImage:
        'https://img0.baidu.com/it/u=2594677340,3536341249&fm=253&fmt=auto&app=138&f=JPG?w=240&h=240',
    }
  },
  //
  onLoad({ cid, query }) {
    this.params.query = query || ''
    this.params.cid = cid || ''

    this.getProductList()
  },

  // 达到你配置的触底距离才会触发
  onReachBottom() {
    if (this.productList.length === this.total)
      return this.$msg('我是有底线的！所有商品数据已加载完毕！')

    // console.log('触"底"啦')
    if (this.loading) return

    this.params.pagenum++ // 页码+1
    this.getProductList() // 重新请求数据
  },

  async onPullDownRefresh() {
    // console.log('有人拉我')
    this.params.pagenum = 1 // 页码重置
    this.productList = [] // 列表重置
    await this.getProductList()

    // 下拉状态关掉的前提是 请求结束
    uni.stopPullDownRefresh()
  },

  methods: {
    // 跳转到商品详情页
    gotoProductDetail(product) {
      uni.navigateTo({
        url: `/pages_sub1/product-detail/product-detail?pid=${product.goods_id}`,
      })
    },

    // formatPrice(number) {
    //   return Number(number).toFixed(2)
    // },

    // 获取商品列表数据的方法
    async getProductList() {
      this.loading = true // 正在请求...

      const { meta, message } = await this.$http.get(
        '/goods/search',
        this.params
      )

      // 请求失败处理
      if (meta.status !== 200) {
        return this.$msg()
      }

      this.productList = [...this.productList, ...message.goods]
      this.total = message.total

      this.loading = false
    },
  },
}
</script>

<style scoped lang="scss">
.goods-item {
  display: flex;
  padding: 20rpx 10rpx;
  border-bottom: 1rpx solid #f0f0f0;

  .goods-item-left {
    margin-right: 10rpx;

    .goods-pic {
      width: 200rpx;
      height: 200rpx;
      display: block;
    }
  }

  .goods-item-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .goods-name {
      font-size: 26rpx;
    }

    .goods-price {
      font-size: 32rpx;
      color: #c00000;
    }
  }
}
</style>
